<template>
    <div>
        <div class="top-nav">
      <div class="nav-bd">
        <ul class="nav-bd-l">
          <li class="userInfo"><router-link :to="{path:'/shoplogin'}" v-if="userinfo.username == undefined">亲，请登录</router-link></li>
          <li><router-link :to="{path:'/userInfo'}">{{userinfo.username}}</router-link></li>
          <li><router-link :to="{path:'/shopregister'}"> 免费注册</router-link></li>
          <li>手机逛淘宝</li>
        </ul>
        <ul class="nav-bd-r">
          <li class="navIndex userInfo"><router-link :to="{path:'/index'}">淘宝首页</router-link></li>
          <li class="myInfo" @mouseenter="showmenu = true" @mouseleave="showmenu = false">
            我的淘宝
            <div class="menu-list" v-if="showmenu" >
              <div class="list-item"><router-link :to="{path:'/userInfo'}">个人中心</router-link></div>
              <div class="list-item"><router-link :to="{path:'/userOrder'}">我的订单</router-link></div>
            </div>
          </li>

          <li><router-link :to="{path:'/shopcart'}">购物车</router-link></li>
          <li>收藏夹</li>
          <li>商品分类</li>
          <li>网站导航</li>
          <li>卖家中心</li>
          <li>联系客服</li>
        </ul>
      </div>
    </div>
    </div>
</template>
<script>
export default {
  // props: ['userinfo'],
  data () {
    return {
      userDetail: {},
      showmenu: false,
      userinfo: {}
    }
  },
  created () {
    this.getUserInfo()
  },
  computed: {
  },
  methods: {
    async getUserInfo () {
      const { data: res } = await this.$http.get('/user/getUserInfo')
      if (res.code !== 200) return this.$message.error('获取用户信息失败！')
      this.userinfo = res.data
    }
  }
}
</script>
<style lang="less" scoped>
  .top-nav {
        width: 100%;
        height: 35px;
        background: #F5F5F5;
        position: relative;

        .nav-bd {
            height: 100%;
            line-height: 35px;
            margin: 0 auto;
            width: 1200px;
            display: flex;
            justify-content: space-between;

            .nav-bd-l,
            .nav-bd-r {
                display: flex;

                li{
                    margin-right: 15px;
                    cursor: pointer;
                    font-size: 12px;
                    color: rgba(0, 0, 0, 0.85);

                    &:hover {
                        color: #f40;
                    }
                }

                .userInfo {
                    color: #f40;

                }
            }
        }

        .menu-list {
            position: absolute;
            top: 35px;
            margin-left: -10px;
            border: 1px solid #EEE;
            background: #FFF;
            z-index: 6;
            .list-item{
                padding: 0px 8px;
                font-size: 12px;
                    color: rgba(0, 0, 0, 0.85);
                    cursor: pointer;
                    &:hover{
                        background: #F5F5F5;
                    }
            }
        }
    }
</style>
